//1.大厅排队人数--echarts
/*参数data:
  var data = {
    zhu1:[235, 246, 255, 249, 260, 243, 251],     //处理完成各时间段数量
    zhu2:[46, 52, 51, 54, 47, 50, 52],            //正在处理各时间段数量
    zhu3:[35, 67, 72, 65, 82, 73, 49]             //正在等待各时间段数量
  };
*/
var MD01 = {
  f1:12*KO,
  f2:16*KO,
  W:0,
  H:0,
  md:null,
  init:function(el,data){
    if(el){
      this.W = el.offsetWidth;
      this.H = el.offsetHeight;
    }
    if(this.md){
      this.md.setOption({
        series: [
          { data: data.zhu1 }, 
          { data: data.zhu2 }, 
          { data: data.zhu3 }
        ]
      })
      return false;
    }else{
      this.guapai(el,data)
    }
  },
  guapai: function(el,data) {   
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#FFED27',
                fontSize: this.f1,
                color:'#001A53'
            }
        },
        textStyle:{
          fontSize: this.f2 
        },
        formatter:'{b}<br>{a0}：<span style="color:#FFED27;">{c0}</span><br>{a1}：<span style="color:#FFED27;">{c1}</span><br>{a2}：<span style="color:#FFED27;">{c2}</span>',
        padding:[10,20]      
      },
      // legend: {
      //   data: ['处理完成', "正在处理", "正在等待"],
      //   // bottom: 50,    //距离底部的距离
      //   // textStyle: {   //字体样式
      //   //   color: "#fff",
      //   //   fontSize: 20,
      //   //   fontWeight: "lighter"
      //   // },
      //   // itemGap: 100, //图块间隙
      //   // itemWidth: 150, //图块宽
      //   // itemHeight: 30 //图块高
      //   top:'5%',
      //   right: "2%",
      //   align: "right",
      //   textStyle: { //字体样式
      //     color: "#fff",
      //     fontSize: this.f1,
      //   },
      //   itemGap: this.f1*2, //图块间隙
      //   itemWidth: this.f1, //图块宽
      //   itemHeight: this.f1, //图块高
      //   // orient: "vertical"
      // },
      grid: {
        top: "18%",
        left: "2%", //折线框左边距
        right: "8%", //折线框右边距
        bottom: "5%", //折线框下边距
        containLabel: true
      },
      xAxis: {
        type: 'category',
        name: "时间",
        data: ["9:00-10:00", "10:00-11:00", "11:00-12:00", "14:00-15:00", "15:00-16:00", "16:00-17:00", "17:00-18:00"],
        nameTextStyle: { //坐标轴名称样式
          color: "#e2e9ff",
          fontSize: this.f1,
          backgroundColor: "" //文字块背景色
        },
        nameGap: 5*KO, //坐标名称与轴线的距离
        axisTick: { //坐标刻度线样式
          lineStyle: {
            color: "rgba(255,255,255,0.5)"
          }
        },
        axisLabel: { //坐标轴刻度标签名样式
          color: "#e2e9ff",
          fontSize: this.f1,
          rotate: 0, //文字倾斜(当刻度标签名过长时使用)
          interval: 0 //显示全部                
        },
        axisLine: { //坐标轴线设置
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.5)",
            width: "1"
          },
          // symbol: ["none", "arrow"], //坐标轴末端箭头
          // symbolSize: [8, 10], //箭头高度和宽度
          // symbolOffset: [0, 0] //箭头与轴线端点的距离
        },
        splitNumber: 7,
      },
      yAxis: {
        name: "数量",
        splitNumber: 8,
        nameTextStyle: { //坐标轴名称样式
          color: "#e2e9ff",
          fontSize: this.f1,
          backgroundColor: "" //文字块背景色
        },
        nameGap: 10*KO,    //坐标名称与轴线的距离
        axisLine: { //坐标轴线设置
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.5)",
            width: "1"
          },
          // symbol: ["none", "arrow"], //坐标轴末端箭头
          // symbolSize: [8, 20], //箭头高度和宽度
          // symbolOffset: [0, 16] //箭头与轴线端点的距离
        },
        axisTick: { //坐标刻度线样式
          lineStyle: {
            color: "rgba(255,255,255,0.5)"
          }
        },
        axisLabel: { //坐标轴刻度标签名样式
          color: "#e2e9ff",
          fontSize: this.f1
        },
        splitLine: { //垂直分割线
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.1)",
            width: "1"
          }
        },
      },
      series: [
        {
          name: '处理完成',
          type: 'bar',
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#3E3CB5'}, {offset: 1,color: '#D66BFD'}]),
          // data: [200, 330, 440, 550, 660, 770, 880]
          data: data.zhu1
        }, {
          name: '正在处理',
          type: 'bar',
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#0D52A1'}, {offset: 1,color: '#09F6FD'}]),
          // data: [880, 770, 660, 550, 440, 330, 220]
          data: data.zhu2
        }, {
          name: '正在等待',
          type: 'bar',
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 0,color: '#025B71'}, {offset: 1,color: '#3BFE91'}]),
          //barGap:0,                                           //条形组中各条形图之间的距离
          barCategoryGap: this.W*0.035,                                    //条形组之间的距离
          // data: [550, 420, 360, 750, 460, 660, 290],
          data: data.zhu3
          //barWidth:30,
          // barMaxWidth:30
        }
      ]
    };

    // 基于准备好的dom，初始化echarts实例
    this.md = echarts.init(el);
    // 使用刚指定的配置项和数据显示图表。
    this.md.setOption(option);
  }
}


















